<template>
  <div>
    <button @click="comName = 'MyLeft'">left组件</button>
    <button @click="comName = 'MyRight'">right组件</button>
    <!-- 动态组件，使用 <component :is="组件名"></component> 来展示组件 -->

    <!-- 加入keep-alive之后，默认，所有的动态组件，都会被保持状态，不会被销毁 -->
    <!-- include属性指定哪些组件需要被缓存（不指定的就不会被缓存了） -->
    <!-- exclude属性指定哪些组件不需要被缓存（不指定的就会被缓存了） -->

    <!-- 如果指定多个组件，多个组件之间用逗号隔开，MyLeft,MyRight 注意，千万不能加空格 -->
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from "@/components/MyLeft";
import MyRight from "@/components/MyRight";
export default {
  components: {
    MyLeft,
    MyRight,
  },
  data() {
    return {
      comName: "MyRight", // 默认展示 MyLeft 组件
    };
  },
};
</script>

<style lang="scss" scoped>
</style>